SpheraCloud Services Guidance

Guidance and Best Practices Guides for our world class API's

Creating a Node.js Web App in Azure #

Azure App Service provides a highly scalable, self-patching web hosting service. This sample shows how to deploy a Node.js app to Azure App Service.

We also have reference applications for Static Web Sites and .NET Core App. Samples in other languages will be added over time.

Prerequisites #

You need Visual Studio Code installed along with Node.js and npm, the Node.js package manager.

You will also need to install the Azure App Service extension, which you can use to create, manage, and deploy Linux Web Apps on the Azure Platform as a Service (PaaS).

Sign In #

Once the extension is installed, log into your Azure account. In the Activity Bar, select on the Azure logo to show the AZURE APP SERVICE explorer. Select Sign in to Azure... and follow the instructions.

Azure App Service Screen Shot

Troubleshooting #

If you see the error “Cannot find subscription with name [subscription ID]”, it might be because you’re behind a proxy and unable to reach the Azure API. Configure HTTP_PROXY and HTTPS_PROXY environment variables with your proxy information in your terminal using export.

Create your Node.js Application #

Next, create a Node.js application that can be deployed to the Cloud. This sample uses an application generator to quickly scaffold out the application from a terminal. If you already have a Node.js application, you can skip ahead to Deploy to Azure.

Scaffold a new application with the Express Generator #

Express is a popular framework for building and running Node.js applications. You can scaffold (create) a new Express application using the Express Generator tool. The Express Generator is shipped as an npm module and can be run directly (without installation) by using the npm command-line tool npx.

    npx express-generator myExpressApp --view pug --git

The --view pug --git parameters tell the generator to use the pug template engine (formerly known as jade) and to create a .gitignore file.

To install all of the application’s dependencies, go to the new folder and run npm install.

Run the application #

Next, ensure that the application runs. From the terminal, start the application using the npm start command to start the server.

    npm start

Now, open your browser and navigate to http://localhost:3000, where you should see something like this:

Express

Deploy to Azure #

In this section, you deploy your Node.js app using VS Code and the Azure App Service extension. This quickstart uses the most basic deployment model where your app is zipped and deployed to an Azure Web App on Linux. This could easily run on a Windows machine, the preference is really done in coordination with your devOps team to determine the preferred hosting environment.

Deploy using Azure App Service #

First, open your application folder in VS Code.

    code .

In the AZURE APP SERVICE explorer, select the blue up arrow icon to deploy your app to Azure.

Deploy

You can also deploy from the Command Palette (CTRL + SHIFT + P) by typing ‘deploy to web app’ and running the Azure App Service: Deploy to Web App command.

  1. Choose the directory that you currently have open, myExpressApp.

  2. Choose a creation option based on the operating system to which you want to deploy:

    • Linux: Choose Create new Web App.
    • Windows: Choose Create new Web App and select the Advanced option.

  3. Type a globally unique name for your Web App and press ENTER. Valid characters for an app name are ‘a-z’, ‘0-9’, and ‘-’.

  4. If targeting Linux, select a Node.js version when prompted. An LTS version is recommended.

  5. If targeting Windows using the Advanced option, follow the additional prompts:

    a) Select Create a new resource group, then enter a name for the resource group. b) Select Windows for the operating system. Select an existing App Service Plan or create a new one. You can select a pricing tier when creating a new plan. c) Choose Skip for now when prompted about Application Insights. d) Choose a region near you or near resources you wish to access.

  6. After you respond to all the prompts, the notification channel shows the Azure resources that are being created for your app.

  7. Select Yes when prompted to update your configuration to run npm install on the target server. Your app is then deployed.

Server build

  1. When the deployment starts, you’re prompted to update your workspace so that later deployments will automatically target the same App Service Web App. Choose Yes to ensure your changes are deployed to the correct app.

save config

Be sure that your application is listening on the port provided by the PORT environment variable: process.env.PORT.

Browse the app in Azure #

Once the deployment completes, select Browse Website in the prompt to view your freshly deployed web app.

Troubleshooting #

If you see the error “You do not have permission to view this directory or page.”, then the application probably failed to start correctly. Head to the next section and view the log output to find and fix the error.

Update the app #

You can deploy changes to this app by using the same process and choosing the existing app rather than creating a new one.

Viewing Logs #

In this section, you learn how to view (or “tail”) the logs from the running App Service app. Any calls to console.log in the app are displayed in the output window in Visual Studio Code.

Find the app in the AZURE APP SERVICE explorer, right-click the app, and choose View Streaming Logs.

When prompted, choose to enable logging and restart the application. Once the app is restarted, the VS Code output window opens with a connection to the log stream.

View logs

After a few seconds, you’ll see a message indicating that you’re connected to the log-streaming service. Refresh the page a few times to see more activity.

2019-09-20 20:37:39.574 INFO  - Initiating warmup request to container msdocs-vscode-node_2_00ac292a for site msdocs-vscode-node
2019-09-20 20:37:55.011 INFO  - Waiting for response to warmup request for container msdocs-vscode-node_2_00ac292a. Elapsed time = 15.4373071 sec
2019-09-20 20:38:08.233 INFO  - Container msdocs-vscode-node_2_00ac292a for site msdocs-vscode-node initialized successfully and is ready to serve requests.
2019-09-20T20:38:21  Startup Request, url: /Default.cshtml, method: GET, type: request, pid: 61,1,7, SCM_SKIP_SSL_VALIDATION: 0, SCM_BIN_PATH: /opt/Kudu/bin, ScmType: None

Next steps #

Congratulations, you’ve successfully completed this sample!